<template>
  <div class="left-container">
    <el-form label-width="110px" :model="data">
      <el-form-item label="ESL类型编码：">
        <el-input v-model="data.etCode" />
      </el-form-item>
      <el-form-item label="ESL类型名称：">
        <el-input v-model="data.etName" />
      </el-form-item>
      <el-form-item label="模板颜色：">
        <el-select v-model="data.blockAddColor" placeholder="请选择模板颜色">
          <el-option
            v-for="item in blockAddColors"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="屏幕类型：">
        <el-select
          v-model="data.lcdType"
          placeholder="请选择屏幕类型"
          @change="typeChange"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="ESL宽度：">
        <el-input-number v-model="data.eslWidth" :min="1" />
      </el-form-item>
      <el-form-item label="ESL高度：">
        <el-input-number v-model="data.eslHeight" :min="1" />
      </el-form-item>
      <el-form-item label="屏幕背景色：">
        <div class="sketch-container">
          <div
            class="sketch"
            :style="{ backgroundColor: data.remark }"
            @click="showSketchHandler()"
          ></div>
          <Sketch
            v-model="sketchBgColor"
            class="picker"
            :show="showSketch"
            @chang-button="changSketchButton($event)"
          />
        </div>
      </el-form-item>
      <el-form-item label="x轴坐标：">
        <el-input-number v-model="data.x0" :min="0" />
      </el-form-item>
      <el-form-item label="y轴坐标：">
        <el-input-number v-model="data.y0" :min="0" />
      </el-form-item>
      <!-- <el-form-item label="备注：">
        <el-input v-model="data.remark" />
      </el-form-item> -->
      <el-form-item label="状态：">
        <el-switch
          v-model="data.enabled"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <div class="divider">
      <span>添加元素</span>
    </div>
    <div class="widgets">
      <el-button class="wbt" type="primary" @click="addwidgetData('text')">
        文本
      </el-button>
      <el-button class="wbt" type="primary" @click="addwidgetData('image')">
        图片
      </el-button>
      <el-button class="wbt" type="primary" @click="addwidgetData('rect')">
        矩形
      </el-button>
      <el-button class="wbt" type="primary" @click="addwidgetData('line')">
        直线
      </el-button>
      <el-button class="wbt" type="primary" @click="addwidgetData('qrCode')">
        二维码
      </el-button>
      <el-button class="wbt" type="primary" @click="addwidgetData('barCode')">
        条形码
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import { Sketch } from '@ans1998/vue3-color'
  import { useEleStore } from '@/store/modules/coms'
  import { TextWidgetData } from '@/views/tag/editor/widget/text/model'
  import { ImageWidgetData } from '@/views/tag/editor/widget/image/model'
  import { RectWidgetData } from '@/views/tag/editor/widget/rect/model'
  import { LineWidgetData } from '@/views/tag/editor/widget/line/model'
  import { QrCodeWidgetData } from '@/views/tag/editor/widget/qrCode/model'
  import { BarCodeWidgetData } from '@/views/tag/editor/widget/barCode/model'

  const { setEditorData, addWidget, setCurIndex } = useEleStore()
  const { getEditorData } = storeToRefs(useEleStore())
  const data = getEditorData
  const types = ref([
    {
      value: '00',
      label: '212*104',
      data: {
        width: 212,
        height: 104,
      },
    },
    {
      value: '02',
      label: '296*152',
      data: {
        width: 296,
        height: 152,
      },
    },
    {
      value: '03',
      label: '250*128',
      data: {
        width: 250,
        height: 128,
      },
    },
    {
      value: '05',
      label: '400*300',
      data: {
        width: 400,
        height: 300,
      },
    },
    {
      value: '06',
      label: '296*128',
      data: {
        width: 296,
        height: 128,
      },
    },
  ]) // 屏幕类型选项
  const typeChange = (value: any) => {
    const result = types.value.filter((item) => {
      if (value === item.value) {
        return item.data
      }
    })[0]
    data.value.eslWidth = result.data.width
    data.value.eslHeight = result.data.height
  }
  watch(data, (val) => {
    setEditorData(val)
  })
  // 添加组件
  const addwidgetData = async (type: string) => {
    let widgetData: any
    switch (type) {
      case 'text':
        widgetData = new TextWidgetData()
        break
      case 'image':
        widgetData = new ImageWidgetData()
        break
      case 'rect':
        widgetData = new RectWidgetData()
        break
      case 'line':
        widgetData = new LineWidgetData()
        break
      case 'qrCode':
        widgetData = new QrCodeWidgetData()
        break
      case 'barCode':
        widgetData = new BarCodeWidgetData()
        break
      default:
        return
    }
    const widgets = await addWidget(widgetData)
    await setCurIndex(widgets.length - 1)
  }

  const sketchBgColor = ref(data.value.remark)
  const showSketch = ref(false)
  const changSketchButton = (picker: any) => {
    showSketch.value = false
    if (picker.isOk) {
      sketchBgColor.value = `#${picker.hex}`
      data.value.remark = `#${picker.hex}`
    }
  }
  const showSketchHandler = () => {
    showSketch.value = true
    sketchBgColor.value = data.value.remark
  }
  // 模板颜色
  const blockAddColors = ref([
    {
      value: '00',
      label: '黑色',
    },
    {
      value: '01',
      label: '红色',
    },
  ])
</script>

<style lang="scss" scoped>
  .left-container {
    min-width: 260px;
    padding: 0 12px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.1);

    .divider {
      position: relative;
      margin: 10px 0;
      font-weight: 700;
      font-size: 16px;
      color: #515a6e;

      span {
        position: relative;
        z-index: 2;
        padding: 0 4px;
        margin-left: 20px;
        background-color: #fff;
      }

      &:before {
        position: absolute;
        width: 100%;
        content: '';
        display: block;
        border-top: 1px solid #e8eaec;
        top: 50%;
        transform: translateY(50%);
        z-index: 1;
      }
    }

    .widgets {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      padding: 8px;

      .wbt {
        margin-right: 10px;
      }
    }
  }

  ::v-deep .el-button + .el-button {
    margin-left: 0;
    margin-bottom: 6px;
  }

  .sketch-container {
    position: relative;
    .sketch {
      width: 40px;
      height: 20px;
      cursor: pointer;
      border: 1px solid;
    }

    .picker {
      position: absolute;
      z-index: 99;
      top: 28px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
